//1. 引入vue和vuex
import Vue from "vue";
import Vuex from "vuex";

//2. 使用vuex插件
Vue.use(Vuex);

//3.实例化一个vuex仓库,并暴露
//4. 给仓库传入配置(state mutations actions getters modules)
export default new Vuex.Store({
    state: {
        count: 0,
        num: 0,
    },
    /* 
      更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
      Vuex 中的 mutation 非常类似于事件：每个mutations都有一个字符串的 事件类型 和一个 回调函数（handler）
      mutations函数会接受 state 作为第一个参数
    */
    mutations: {
        increment(state) {
            state.count++
        },
        decrement(state) {
            state.count--
        },
        // 可以向 state.commit 传入额外的参数，即 mutation 的 载荷（payload），早mutations方法中第二个参数接收
        incrementN(state, payload) {
            state.count += payload.n
        },
        incrementWait(state) {
            // mutation 中的异步函数中的回调无法让工具devtools监听到，因为当mutation 触发的时候，回调函数还没有调用，devtools不知道什么时候回调函数实际上被调用--实质上任何在回调函数中进行的状态的改变都是不可被vue的devtools追踪的
            setTimeout(() => {
                state.count++
            }, 2000);
        }
    },
    actions: {
        /* 
         actions中方法的任务1.执行异步操作   2.提交mutations更新state
         actions的方法接收一个阉割版的store作为参数，我们可以使用store上的commit 方法提交mutation
         actions的方法接收的第二个参数是dispatch的时候传递的参数
         */
        incrementWait(store) {
            setTimeout(() => {
                store.commit('increment')
            }, 2000);
        },
        incrementNWait(store, n) {
            setTimeout(() => {
                // 提交mutation的时候，需要遵守payload写法
                store.commit('increment', { n: n })
            }, 2000);
        }
    },
    getters: {
        doubleCount(state) {
            return state.count * 2
        }
    },
});
